<template>
    <div class="iot_container">
        <div class="iot_list">
            <a v-for="item in categoryList" :key="item.id" class="iot_item" href="">
                <img :src="item.icon" alt="" class="iot_icon">
                <span class="iot_test">{{ item.name }}</span>
            </a>
        </div>
    </div>
</template>

<style scoped>
.iot_list{
  display: grid;                
  grid-template-columns: repeat(5, 1fr); 
  gap: 16px;                    
  max-width: 1200px;            
  margin: 0 auto;               
  padding: 20px;                
}
.iot_container{
  width: 414px; 
  background-color: #f7f7ff;
}
img{
    width: 50px;
    height: 50px;
}
.iot_test{
    text-align: center;
    color: #8b8b8d;
    margin-left: 10px;
}
.iot_item{
    text-decoration: none;
}
</style>

<script setup>
import { getHomeCategoryAPI } from '@/apis/homecategory';
import { onMounted,ref } from 'vue';

const categoryList=ref([])

const getHomeCategory=async()=>{
    const res=await getHomeCategoryAPI()
    console.log(res)
    categoryList.value=res.result
}

onMounted(()=>getHomeCategory())
</script>